<template>
  <div class="list">
    <!-- 按钮&搜索框 -->
    <div>
      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-button type="success" @click="handleAdd">新增</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input
              clearable
              prefix-icon="el-icon-search"
              placeholder="请输入内容"
              v-model="input"
              class="input-with-select"
              @keyup.enter.native="handleEnter"
            >
            </el-input></div
        ></el-col>
      </el-row>
    </div>

    <!-- Table组件 -->
    <ListTable></ListTable>

    <!-- Pagination分页 -->
    <ListPagination></ListPagination>

    <!-- Form组件 -->
    <el-drawer
      :before-close="handleAdd"
      size="50%"
      :title="title"
      :visible.sync="drawer"
      :wrapperClosable="false"
    >
      <ListForm></ListForm>
    </el-drawer>
  </div>
</template>

<script>
import ListTable from "./components/ListTable";
import ListForm from "./components/ListForm";
import ListPagination from "./components/ListPagination";
import { mapState, mapMutations,mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
    };
  },
  methods: {
    ...mapActions("list", ["getList"]),
    ...mapMutations("list", ["SET_DRAWER", "SET_QUERY"]),
    handleAdd() {
      this.SET_DRAWER(this.drawer);
    },
    handleEnter() {
      this.SET_QUERY(this.input);
      this.getList()
    },
  },
  components: {
    ListTable,
    ListPagination,
    ListForm,
  },
  computed: {
    ...mapState("list", ["title", "drawer"]),
  },
};
</script>

<style scoped>
.list {
  margin: 20px;
}

/deep/ :focus {
  outline: 0;
}
</style>
